<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<body class="gray-bg">
<style>
    /*.fixed-table-pagination{
        display: none !important;
    }*/
</style>
<div class="container-div">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form id="brandCategory-form">
                <div class="select-list">
                    <ul>

                        <li>
                            品牌：<select name="fbrand" id="fbrand">
                            <option value="">所有</option>
                            <option th:each="brand : ${brands}" th:text="${brand}" th:value="${brand}"></option>
                        </select>
                        </li>
                        <li class="select-time">
                            <label>抓取时间： </label>
                            <input type="text" class="time-input" id="startTime" placeholder="" name="params[beginTime]" value=""/>
                            <span>-</span>
                            <input type="text" class="time-input" id="endTime" placeholder="" name="params[endTime]" value="" />
                        </li>
                        <li>
                            <!--<a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>-->
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="doSearch()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                            <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                            <a class="btn btn-success btn-rounded btn-sm" onclick="switchTo()"><i class="glyphicon glyphicon-sort"></i>&nbsp;切换类型</a>
                        </li>
                    </ul>
                </div>
            </form>

        </div>


        <div class="col-sm-12 select-table table-responsive" style="min-height:85%;background-color: #1086141a" id="echarts_table" >
            <table id="bootstrap-table" data-mobile-responsive="true" class="table text-nowrap table-hover" style="background-color: white"></table>
        </div>
    </div>
</div>
<div th:include="include :: footer"></div>
<script th:src="@{/ajax/libs/echarts/echarts.js}"></script>
<script th:src="@{/ruoyi/js/toChartsJson.js}"></script>
<script th:inline="javascript">
    var editFlag = [[${@permission.hasPermi('system:user:edit')}]];
    var removeFlag = [[${@permission.hasPermi('system:user:remove')}]];
    var resetPwdFlag = [[${@permission.hasPermi('system:user:resetPwd')}]];
    var datas = [[${@dict.getType('sys_normal_disable')}]];
    var prefix = ctx + "firststage/brandCategory";
    var myChart;
    var returnData;//后台返回的数据
    var pageForm;//页面形态(图表：'chart',报表：'table')

    //默认初始化显示图表
    $(function() {

        $.ajax({
            url:prefix+"/list",
            type:'post',
            dataType:'json',
            data:{
                params:{beginTime:today()},
            },
            success:function (data) {
                returnData = data.rows;
                createCharts(returnData);
            },error:function () {
                console.log('error!');
            },beforeSend:function () {
                //设置抓取时间为当前日期前一天
                $("#startTime").val(today());
                $("#endTime").val(today());

                $.modal.loading("数据加载中，请稍后...");
            },complete: function (data) {
                // layer.close(loadIndex);
                $.modal.closeLoading();
            }
        })
    });


    //创建报表(不采用分页或者直接使用本地数据初始化表格会导致排序、刷新等等功能无法正常使用)
    function createTable(queryParams) {
        pageForm = 'table';
        var options = {
            data:queryParams==undefined?returnData:null,
            url:queryParams==undefined?null:prefix+"/list",
            pagination: false,
            queryParams:queryParams,
            striped:true,
            // sortName: "fproductprice",
            // sortOrder: "desc",
            modalName: "品牌类型",
            search: false,
            showRefresh:false,
            columns: [
                {
                    field: 'fbrand',
                    title: '品牌',
                    // sortable: true
                },
                {
                    field: 'fcategory',
                    title: '类型',
                    // sortable: true
                },
                {
                    field: 'fstar',
                    title: '星星评价',
                    // sortable: true
                },
                {
                    field: 'fstaramount',
                    title: '星星评价数',
                    // sortable: true
                },
                {
                    field: 'fproductprice',
                    title: '价格(SAR)',
                    // sortable: true
                },
                {
                    field: 'fcommentamount',
                    title: '评论数',
                    // sortable: true
                },
                {
                    field: 'fdate',
                    title: '抓取时间',
                    formatter:function (value,row,index) {
                        return value.substring(0,10);
                    }
                    // sortable: true
                }],
            onLoadSuccess: function (item, $element) {
                returnData = $('#bootstrap-table').bootstrapTable('getData');//表格所有数据数据
            },
        };
        $.table.init(options);
    }
    //---------------------------------------------创建图表---------------------------------------------------
    function createCharts(returnJson) {
        var chartJson = brandCategoryToChartJson(returnJson);
        myChart = echarts.init(document.getElementById('echarts_table'));
        var option = {
            title: {
                text: '品牌类型分析表',//图表名称 2012-12资产分析
                textStyle : {
                    fontSize : 18//标题字体
                },
                subtextStyle :	{
                    fontSize  : 15,
                    color : 'gray'
                },
                x: 'center', // 'center' | 'left' | {number},
                y: 'top'
            },
            tooltip : {
                trigger: 'axis',
                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                },
                /*formatter:function (data) {
                    console.log(data);
                }*/
            },
            toolbox: {
                show: true,
                orient: 'vertical',
                left: '97%',
                top: 'center',
                feature: {
                    mark: {show: true},
                    magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            dataZoom:[
                {
                    show: true,
                    startValue: 0,
                    endValue: 5
                }
            ],
            legend: {
                data:['价格(avg)','星星点评数(sum)','评论数(sum)'/*,'星星(avg)'*/],
                // selected:{'星星点评数(sum)':false},
                y:'30',
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis : [
                {
                    type : 'category',
                    data : chartJson.titleJson,
                }
            ],
            yAxis : [
                {
                    type : 'value'
                }
            ],
            series : [
                {
                    name:'价格(avg)',
                    type:'bar',
                    data:chartJson.averagepriceJson//[320, 332, 301, 334, 390, 330]
                    ,label: {
                        normal: {
                            show: true,
                            position:'insideBottom'
                        }
                    },
                    /*markLine : {
                        lineStyle: {
                            normal: {
                                type: 'dashed'
                            },
                            color:{
                              colorStop:[{
                                  offset:0,color:'blue'// 0% 处的颜色
                              },{
                                  offset:1,color:'blue'// 0% 处的颜色
                              }]
                            },
                        },
                        data : [
                            [{type : 'min'}, {type : 'max'}]
                        ]
                    }*/
                },
                {
                    name:'星星点评数(sum)',
                    type:'bar',
                    data:chartJson.staramountJson,//[120, 132, 101, 134, 90, 230]
                    lineStyle: {
                        width: 0, // 线宽是0
                        color: 'rgba(0, 0, 0, 0)' // 线的颜色是透明的
                    },
                    label: {
                        normal: {
                            show: true,
                            position:'insideBottom'
                        }
                    },
                },
                {
                    name:'评论数(sum)',
                    type:'bar',
                    data:chartJson.commentamountJson//[220, 182, 191, 234, 290, 330]
                    ,label: {
                        normal: {
                            show: true,
                            position:'insideBottom'
                        }
                    },
                },
                /*{
                    name:'星星(avg)',
                    type:'bar',
                    data:[220, 182, 191, 234, 290, 330]
                    ,label: {
                        normal: {
                            show: true,
                            position:'insideBottom'
                        }
                    },
                }*/
            ]
        };
        pageForm = 'chart';
        myChart.setOption(option);
    }

//-----------------------------------------search and switch-------------------------------

    //查询
    function doSearch() {
        //抓取时间为空不能搜索
        /*if(chooseDateNotNull()!=true){
            $.modal.alertWarning(chooseDateNotNull());
            return false;
        }*/

        var fbrand = $('#fbrand').val();//品牌
        var beginTime = $("#startTime").val();//业务开始时间
        var endTime = $("#endTime").val();//业务结束事件
        var params = {beginTime:beginTime,endTime:endTime};
        var queryParams = {fbrand:fbrand,params:params};
        if(pageForm=='table'){
            //销毁原表格,否则不会重新从后台再次查询数据
            $("#bootstrap-table").bootstrapTable('destroy');
            createTable(queryParams);
        }else{
            myChart.dispose();
            $.ajax({
                url:prefix+"/list",
                type:'post',
                dataType:'json',
                data:queryParams,
                success:function (data) {
                    returnData = data.rows;
                    createCharts(returnData);
                },error:function () {
                    console.log('error!');
                }
            })
        }
    }

    //切换图表报表
    function switchTo() {
        //抓取时间为空不能切换
        if(chooseDateNotNull()!=true){
            $.modal.alertWarning(chooseDateNotNull());
            return false;
        }

        if (pageForm == 'chart') {//判断是否为报表，是则切换图表，否则切换报表
            myChart.dispose();//释放图表，摧毁对象
            // $("#echarts_table").empty();
            $("#echarts_table").css("user-select","auto");//修改从图表切换过来不能复制问题
            $("#echarts_table").append("<table id=\"bootstrap-table\" data-mobile-responsive=\"true\" ></table>");
            createTable();
        } else {
            createCharts(returnData);
        }
    }
</script>
</body>
</html>